<template>
	<view>
		<uni-section :title="note.title" type="line" style="margin-top:0 ;"></uni-section>
		<view v-if="note.classify===110">
			<img style="width: 750upx;" :src="getImgUrl()" alt="" @click="previewImg(getImgUrl())" />
		</view>
		<view v-else-if="note.classify===105">
			<qin-music-player style="margin: 0px;padding: 0px;" :m_title='note.title' :m_src='getImgUrl()'
				:a_play='false' :m_size="3.8"></qin-music-player>
		</view>
		<view v-else-if="note.classify===111">
			<video style="width: 750upx;" :src="getImgUrl()"></video>
		</view>
		<view v-else>
			<u-parse noData="" className="else-parse" :content="note.content" :autosetTitle="false"
				:show-with-animation="true" :selectable="true"></u-parse>
		</view>
		<uni-section title="标签" type="line" v-if="tags.length!=0">
			<view class="example-body">
				<view class="tag-view" v-for="(item,index) of tags">
					<uni-tag :text="item.name" :type="item.type" size="small"></uni-tag>
				</view>
			</view>
		</uni-section>
		<uni-section title="操作" type="line">
			<view v-if="[110,105,111,107].includes(note.classify)">
				<button style="background-color: #00ff7f;" @click="fileDown()">下载</button>
			</view>
			<view v-else>
				<button style="background-color: #00ff7f;" @click="copyToClipboard()">复制内容</button>
			</view>

		</uni-section>

	</view>
</template>

<script>
	import QinMusicPlayer from '@/components/Qin-Music-Player/Qin_Music_Player.vue'
	import {
		Base64
	} from 'js-base64';
	import {
		apiBaseUrl,
		fileBaseUrl
	} from '../../config/config'
	export default {
		data() {
			return {
				note: {},
				tags: []
			}
		},
		components: {
			QinMusicPlayer
		},
		methods: {
			// 复制到剪切板
			copyToClipboard() {
				let data = this.note.title
				if ([100, 109, 106, 101].includes(this.note.classify)) {
					data = this.$common.dealRichRemoveTag(this.note.content)
				}
				console.info(data)
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
					}
				});
			},

			// 文件下载到本地
			fileDown() {
				let fileName = this.note.title
				let prefix = this.getImgUrl().substr(this.getImgUrl().lastIndexOf("."));
				let _this = this;
				console.info(fileName)
				uni.showModal({
					title: "修改文件名",
					content: "不修改则以默认文件名保存",
					editable: true,
					placeholderText: fileName,
					success: (res) => {
						if (res.confirm) {

							if (!(res.content === null || res.content === '')) {
								fileName = res.content
							}
							//增加后缀
							if (!fileName.endsWith("test")) {
								fileName = fileName + prefix
							}
							console.info(fileName)
							// return
							uni.showLoading({
								title: "正在下载",
								mask: true
							})
							//开始文件下载任务
							//注意：url是你要下载的文件路径，  xlsName（变量，随便命名） 是文件的后缀名，用于文件命名和格式修改
							let dtask = plus.downloader.createDownload(_this.getImgUrl(), {
								//1.本地路径开头使用file://;
								//2.Android平台本地绝对路径为"storage/emulated/0",就是用户文件管理器能看到的了;
								//3.创建"xxx"作为文件夹名称，后缀是用于文件命名和格式修改，大家可以使用变量。
								filename: 'file://storage/emulated/0/freeNature/dowmload/' +
									fileName //利用保存路径，实现下载文件的重命名
							}, function(d, status) { //d为下载的文件对象;status下载状态
								if (status == 200) { //下载成功
									console.log("下载成功")
									//d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
									let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
									// plus.runtime.openFile(d.filename); //选择软件打开文件
									uni.hideLoading()
									uni.showToast({
										title: "下载完成",
										mask: true
									})
								} else { //下载失败
									plus.downloader.clear(); //清除下载任务
									uni.hideLoading()
									uni.showToast({
										title: "下载失败",
										mask: true,
										icon: "fail"
									})
								}
							});
							dtask.start(); //启用

						}
					}
				})
				console.info(123)
				return;


			},
			getImgUrl() {
				console.info(fileBaseUrl + this.note.content)
				return fileBaseUrl + this.note.content;
			},
			//图片预览
			previewImg(imgUrl) {
				uni.previewImage({
					current: 0,
					urls: [imgUrl]
				})
			},
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.noteId); //打印出上个页面传递的参数。
			this.$api.getNoteByNoteId(option.noteId).then(res => {
				this.note = res.data
				this.note.content = this.$common.dealRichTextImg(Base64.decode(this.note.content))
				this.note.content = this.$common.dealRichTextTagP(this.note.content)

				this.tags = JSON.parse(this.note.tag)
				if (this.tags === null) {
					this.tags = []
				}
			});
		},
		onReady() {
			console.info("详情页面的")
			uni.setNavigationBarTitle({
				title: ''
			})
			//这两个值一起使用
			uni.setNavigationBarColor({
				frontColor: '#000000', //仅支持 #ffffff 和 #000000
				backgroundColor: '#3f26ff',
			})
		}
	}
</script>

<style>
	/* 富文本的样式 */
	/deep/.wxParse .p {
		padding-bottom: 0em;
		text-indent: 2em;
	}

	.p {
		margin: 0px;
	}

	.example-body {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: wrap;
		padding-bottom: 20upx;
	}

	.tag-view {
		margin-right: 10upx;
	}
</style>